<template>
  <div class="index">
    <img src="@/assets/img/bg.png" class="bg" />
    <!-- <vue-particles
      color="#9494FF"
      :particleOpacity="1"
      :particlesNumber="70"
      shapeType="circle"
      :particleSize="2"
      linesColor="#fff"
      :linesWidth="0"
      :lineLinked="false"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="5"
      :hoverEffect="false"
      hoverMode="grab"
      :clickEffect="false"
      clickMode="push"
    >
    </vue-particles> -->
    <div class="topView">
      <div
        class="item"
        @click="toInfo(item.id,item.name)"
        v-for="(item, index) in list"
        :key="index"
      >
        <img :src="item.icon" class="item-img" />
      </div>
      <!-- <div class="item" @click="toInfo(100)" :key="index">
        <img src="@/assets/img/icon.png" class="item-img" />
      </div> -->
    </div>
    <img src="@/assets/img/line.png" class="line" />
    <!-- <div class="bottom flex align between">
      <div
        class="item"
        @click="toInfo(item.id)"
        v-for="(item, index) in list2"
        :key="index"
      >
        <img src="@/assets/img/bg3.png" class="item-bg" />
        <div>{{ item.name }}</div>
        <img :src="item.icon" class="item-img" />
      </div>
    </div> -->
  </div>
</template>
<script>
import { channel } from "@/api/apiData";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    toInfo(id,name) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id,
          name:name
        },
      });
    },
    getList() {
      channel.query({ parent_id: 100 }).then((res) => {
        if (res.code == 1) {
          this.list = res.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.topView {
  margin: 260px 44px 50px;
  .item {
    // padding: 16px 0;
    // width: 330px;
    position: absolute;
    .item-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .item-img {
      position: relative;
      width: 333px;
      // height: 222px;
      display: block;
      margin: 0 auto;
    }
    div {
      position: relative;
      font-weight: bold;
      font-size: 24px;
      padding-left: 42px;
      padding-bottom: 10px;
      margin-top: 3px;
      /* 设置字体透明 */
      color: transparent;
      /* 设置线性渐变，从红色渐变到蓝色 */
      background-image: linear-gradient(to bottom, #fdfdfd, #4795d7);
      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
      -webkit-background-clip: text;
      /* 非Webkit内核浏览器需要使用标准前缀 */
      background-clip: text;
      /* 把当前元素设置为行内块，以便能够应用背景 */
      display: inline-block;
    }
  }
  .item:nth-child(even) {
    .item-img {
      width: 330px;
      // height: 222px;
    }
  }

  .item:nth-child(1) {
    top: 269px;
    left: 34px;
  }
  .item:nth-child(2) {
    top: 587px;
    left: 234px;
  }
  .item:nth-child(3) {
    top: 269px;
    left: 397px;
  }
  .item:nth-child(4) {
    top: 587px;
    left: 606px;
  }
  .item:nth-child(5) {
    top: 269px;
    left: 760px;
  }
  .item:nth-child(6) {
    top: 587px;
    left: 978px;
  }
  .item:nth-child(7) {
    top: 269px;
    left: 1120px;
  }
  .item:nth-child(8) {
    top: 587px;
    left: 1350px;
  }
  .item:nth-child(9) {
    top: 269px;
    right: 101px;
  }
   .item:nth-child(10) {
    top: 587px;
    right: 33px;
  }
}
.line {
  width: 100%;
  position: relative;
  display: block;
  margin-top: 505px;
}
.bottom {
  margin: 35px 240px;
  .item {
    position: relative;
    padding: 16px 0;
    width: 343px;
    .item-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .item-img {
      position: relative;
      width: 297px;
      height: 123px;
      display: block;
      margin: 0 auto;
    }
    div {
      z-index: 2;
      position: relative;
      font-weight: bold;
      font-size: 24px;
      padding-left: 42px;
      padding-top: 10px;
      margin-bottom: 3px;
      /* 设置字体透明 */
      color: transparent;
      /* 设置线性渐变，从红色渐变到蓝色 */
      background-image: linear-gradient(to bottom, #ffffff, #ffffff, #4795d7);
      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
      -webkit-background-clip: text;
      /* 非Webkit内核浏览器需要使用标准前缀 */
      background-clip: text;
      /* 把当前元素设置为行内块，以便能够应用背景 */
      display: inline-block;
    }
  }
}
</style>